<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>系统常态化运行评分系统</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>

<body class="">
    <div class="layui-card" id="folder-container">
        <div class="layui-card-body">
            <div class="layui-bg-gray" style="padding: 16px;">
                <div id="cards-container" class="layui-row layui-col-space15">
                    <!-- 卡片内容将在这里动态生成 -->
                </div>
            </div>
        </div>
    </div>

    <div id="file-detail" style="display: none;">
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="header-title">
                    <span>
                        <span onclick="backToFolder()" style="cursor: pointer; color:blue">矿井基本资料</span> /
                        <span id="folder-title"></span>
                    </span>
                </span>
            </div>
            <div class="layui-card-body">
                <table class="layui-table">
                    <colgroup>
                        <col style="min-width: 100px;">
                        <col width="250">
                        <col width="250">
                        <col width="250">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>文件名称</th>
                            <th>文件大小</th>
                            <th>最后更新时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="file-list">
                        <!-- 文件列表将在这里动态生成 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="../../component/layui/layui.js"></script>
    <script src="../../component/pear/pear.js"></script>
    <script src="../../scripts/utils/request.js"></script>
    <script src="../../scripts/utils/auth.js"></script>
    <script>
        var $, form, layer, notice, tinymce, element, upload;
        layui.use(['form', 'jquery', 'layer', 'notice', 'tinymce', 'util', 'element', 'upload'], function () {
            form = layui.form;
            $ = layui.jquery;
            layer = layui.layer;
            notice = layui.notice;
            tinymce = layui.tinymce;
            util = layui.util;
            element = layui.element;
            upload = layui.upload
            var folders = [];
            // 获取查询字符串
            var queryString = window.location.search;

            // 解析查询字符串为对象
            var params = new URLSearchParams(queryString);

            // 从查询字符串中获取 id
            var id = params.get('mineId');
            console.log('ID:', id);
            postAjaxNoSuccessTip('/api/file/listObjects', { minerId: id }, function (response) {
                if (response.code === 0) {
                    folders = response.data.fileList;
                    var cardsHtml = '';
                    folders.forEach(function (folder, index) {
                        cardsHtml += `
                <div class="layui-col-md3" onclick="showFolderDetails(${index})" style="cursor: pointer;">
                    <div class="flex-container">
                         <i class="layui-icon pear-icon pear-icon-folder-close" style="font-size: 60px; color:#3963bc;"></i>
                        <div class="layui-font-14" style="margin-top: 20px;">
                            ${folder.fileName}
                        </div>
                    </div>
                </div>
            `;
                    });

                    $('#cards-container').html(cardsHtml);
                }
            }, null);
            var currentFolder;
            // 显示文件夹详情
            window.showFolderDetails = function (index) {
                currentFolder = folders[index];

                refashFileList()

            };
            function refashFileList() {
                $('#folder-title').text(currentFolder.fileName);
                selectPath = currentFolder.fileName;
                var fileListHtml = '';
                postAjaxNoSuccessTip('/api/file/listObjects', { minerId: id, prefix: currentFolder.fileUrl }, function (response) {
                    let fileListHtml = ''; // 确保在每次调用时清空 HTML 内容
                    if (response.code === 0) {
                        if (response.data.fileList && response.data.fileList.length > 0) {
                            response.data.fileList.forEach(function (file) {
                                fileListHtml += `
                    <tr>
                        <td>${file.fileName}</td>
                        <td>${(file.size / 1024).toFixed(0)}kb</td>
                        <td>${file.lastModified}</td>
                        <td>
                            <button class="pear-btn pear-btn-primary pear-btn-sm" onclick="previewFile('${ file.fileUrl}')">查看</button>
                        </td>
                    </tr>
                `;
                            });
                        } else {
                            // 如果没有文件，则显示无数据提示
                            fileListHtml = `
                <tr>
                    <td colspan="4" style="text-align:center;">无数据</td>
                </tr>
            `;
                        }
                        $('#file-list').html(fileListHtml);
                        $('#folder-container').hide(); // 隐藏文件夹容器
                        $('#file-detail').show(); // 显示文件详情
                    }
                }, null);
            }
            // 返回文件夹列表
            window.backToFolder = function () {
                $('#file-detail').hide(); // 隐藏文件详情
                $('#folder-container').show(); // 显示文件夹容器
            };

            // 文件操作函数
            window.downloadFile = function (fileUrlStr) {
                postAjax('/api/file/downloadFile', { id: fileUrlStr }, function (response) {
                    // DownloadFile(response.data)
                }, null);

            };
            /**
             * 通用下载函数
             * @param {string} fileUrl - 要下载的文件的 URL
             */
            function DownloadFile(fileUrl) {
                // 创建一个临时的链接元素
                var link = document.createElement('a');
                // 设置链接的 href 为文件的 URL
                link.href = fileUrl;
                // 从 URL 中提取文件名
                var fileName = fileUrl.substring(fileUrl.lastIndexOf('/') + 1);
                // 设置下载的文件名
                link.download = fileName;
                // 将链接添加到 DOM 中（不显示）
                document.body.appendChild(link);
                // 触发点击事件以开始下载
                link.click();
                // 下载完成后移除链接元素
                document.body.removeChild(link);
            }



            window.previewFile = function (fileUrlStr) {
                postAjaxNoSuccessTip('/api/file/previewFile', { id: fileUrlStr }, function (response) {
                    window.open(response.data)
                }, null);
            };

            window.deleteFile = function (fileUrlStr) {
                layer.confirm('确定删除？', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    layer.close(index);
                    postAjax('/api/file/removeMineInfo', { parentPath: fileUrlStr }, function (response) {
                        refashFileList();
                    }, null);
                });

            };
        });
    </script>
</body>
<style>
    .header-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .flex-container {
        display: flex;
        /* 启用Flex布局 */
        flex-direction: column;
        /* 设置主轴为垂直方向 */
        justify-content: center;
        /* 在交叉轴上居中对齐 */
        align-items: center;
        height: 120px;
        padding-top: 14px;
        /* 在主轴上居中对齐 */
        /* 设置父容器高度，确保有空间进行垂直居中 */
    }
</style>

</html>